<template>
  <div class="profile">
    <van-nav-bar title="Informações pessoais" fixed left-arrow :border="false" @click-left="handleBack" />
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item :title="$t('component.userInfo.1')" name="1">{{ user.username }}</van-collapse-item>
      <van-collapse-item :title="$t('component.userInfo.3')" name="2">
        <van-uploader :file-list="fileList" :after-read="afterRead" :max-count="1" :preview-full-image="false" @delete="handleRemove"/>
        <div class="mt10">
          <van-button @click="handleUpdate" color="#fb8c24" round size="small">{{ $t("component.userInfo.4") }}</van-button>
        </div>
      </van-collapse-item>
      <van-collapse-item :title="$t('component.userInfo.5')" name="3">
        <van-field v-model="user.mobile"></van-field>
        <van-button class="mt10" @click="handleUpdate" color="#fb8c24" round size="small">{{ $t("component.userInfo.4") }}</van-button>
      </van-collapse-item>
      <van-collapse-item :title="$t('component.userInfo.6')" name="4">
        <van-field v-model="user.no"></van-field>
        <van-button class="mt10" @click="handleUpdate" color="#fb8c24" round size="small">{{ $t("component.userInfo.4") }}</van-button>
      </van-collapse-item>
      <van-collapse-item :title="$t('component.userInfo.9')" name="5">
        <van-field v-model="areaName" readonly @click="locationShow = true"></van-field>
        <van-button class="mt10" @click="handleUpdate" color="#fb8c24" round size="small">{{ $t("component.userInfo.4") }}</van-button>
      </van-collapse-item>
      <van-collapse-item :title="$t('component.userInfo.8')" name="6">
        <van-field v-model="user.email" readonly></van-field>
        <van-button class="mt10" @click="handleUpdate" color="#fb8c24" round size="small">{{ $t("component.userInfo.4") }}</van-button>
      </van-collapse-item>
    </van-collapse>
    <ModalLocation v-if="locationShow" :p-code="pCode" :c-code="cCode" @close="locationShow = false" @confirm="handleLocationConfirm" />
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
import ModalLocation from "@/components/modal-location";
export default {
  name: "Profile",
  components: { ModalLocation },
  data() {
    return {
      activeNames: "1",
      locationShow: false,
      uploadUrl: Api.uploadUrl,
      domain: Domain,
      user: {},
      pCode: "",
      pName: "",
      cCode: "",
      cName: "",
      fileList:[]
    };
  },
  created() {
    this.loadUserInfo();
    
  },
  computed: {
    // fileList() {
    //   return [
    //     {
    //       path: this.user.avatar,
    //       url: Domain + this.user.avatar,
    //     },
    //   ];
    // },
    areaName() {
      if (this.cName) {
        return [this.pName, this.cName].join("/");
      } else {
        return this.pName;
      }
    },
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    handleRemove() {
      this.fileList.splice(0,1)
    },
    loadUserInfo() {
      Api.loadUser().then(async (res) => {
        this.user = res;
        // 用户头像
        this.fileList = []
        this.fileList.push({path: this.user.avatar,url: Domain + this.user.avatar})
        const [pCode = "", cCode = ""] = this.user.areaCode.split("/");
        this.pCode = pCode;
        this.cCode = cCode;
        if(!this.pCode && this.cCode){
          this.pCode = this.cCode
          this.cCode = ''
        }
        const areas = await this.loadTree();
        const p = areas.find((item) => item.code == this.pCode) || {};
        this.pName = p.name || "";
        if (p && p.children.length > 0) {
          const c = p.children.find((item) => item.code == this.cCode) || {};
          this.cName = c.name || "";
        }
      });
    },
    loadTree() {
      return new Promise((resolve) => {
        Api.areaTree().then((res) => {
          resolve(res);
        });
      });
    },
    afterRead(file) {
      const params = new FormData();
      params.append("file", file.file);
      Api.uploadMethod(params).then((res) => {
        if (res.path) {
          this.user.avatar = res.path;
          this.fileList = []
          this.fileList.push({path: this.user.avatar,url: Domain + this.user.avatar})
        }
      });
    },
    handleLocationConfirm(item) {
      this.locationShow = false;
      this.cName = item.cityName;
      this.pName = item.provinceName;
      this.pCode = item.provicenCode;
      this.cCode = item.cityCode;
    },
    handleUpdate() {
      if (this.cCode) {
        this.user.areaCode = [this.pCode, this.cCode].join("/");
        this.user.areaName = [this.pName, this.cName].join("/");
      } else {
        this.user.areaCode = this.pCode;
        this.user.areaName = this.pName;
      }
      Api.updateUser({ ...this.user, locked: 0 }).then((res) => {
        this.$toast("success");
        this.loadUserInfo();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.profile {
  background-color: #fff;
  padding-top: 45px;
}
</style>
